<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    	<title>统战成员学习平台</title>
	    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
	    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
	</head>
	<body>
		<div id='app' style="display:none" v-show="true"  class="app">
			<div class="app-content no-pad">
				<transition-group name="list" tag="ul" class="list list-kc">
					<li v-for="item of lessonList" :key="item" @click="openLesson(item)">
						<div class="dl">
							<div class="news-img" :style="'background:url(\''+ (item.courseImg==''?'../../images/lesson_default.png':(imageBasePath + item.courseImg)) +'\') no-repeat center center;background-size:cover;'"></div>
				   	</div>
					   <div class="dr">
						   <div class="l1">
								<span class="l1-title">
								  {{item.courseName}}
							    </span>
						   </div>
						   <div class="l2">
							  <span class="l2-title elps">
								{{item.courseContent}}
							  </span>
						   </div>
						   <div class="l3">
							  <span class="l3-title">
								 <img src="../../image/eye.png">
								 <span class="views">{{item.pv || 0}}<span>
							  </span>
						   </div>
					   </div>
					</li>
					<li v-if="lessonList.length && loaded" class="no-more" key="no_more">没有更多了</li>
				</transition-group>
			</div>
			<transition name="fade">
				<spinner v-if="loading"></spinner>
			</transition>
			<transition name="fade">
				<div v-if="!lessonList.length && loaded" class="no_data_list">
					<img src="../../image/no_lesson_search.png">
					<p>暂时没有您想要的课程</p>
				</div>
			</transition>
		</div>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/common.js"></script>
		<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
		    new Vue({
				el: '#app',
		     	data: {
					courseGenreId: 0,
					lessonList: [],
					courseGenreName: '',
					loading: false,
					loaded: false,
					pageNum: 1,
					pageSize: 10
		     	},
				mounted: function() {
		        	var $this = this;
		        	apiready = function() {
								$this.courseGenreId = api.pageParam.courseGenreId;
								api.parseTapmode();
								$this.getList();

						onScrollToBottom(function () {
									if($this.loaded) return;
									$this.getList();
						})
								api.setRefreshHeaderInfo({
								    bgColor: '#f5f5f9',
								    textColor: '#aaa',
								    textDown: '下拉刷新...',
								    textUp: '松开刷新...'
								}, function(ret, err) {
									$this.pageNum = 1;
									$this.loaded = false;
									$this.getList(true);
								});
							}
		    	},
		    	methods: {
					getList: function(refresh) {
						var $this = this;
						if($this.loading) return;
						$this.loading = true;
						var postParam = {
							pageNum: $this.pageNum,
							pageSize: $this.pageSize
						};
						if($this.courseGenreId.length){
							postParam = {
								courseGenreId: $this.courseGenreId,
								pageNum: $this.pageNum,
								pageSize: $this.pageSize
							};
						}
						post('/client/course/courseList', postParam, function(ret) {
							if(refresh) {
								api.refreshHeaderLoadDone();
								$this.lessonList = []
							}
							if(ret.isSuccess) {
								ret.data.list.forEach(function(item) {
									$this.lessonList.push(item)
								});
								$this.loading = false;
								ret.data.isLastPage ? $this.loaded = true : $this.pageNum++;
								parseTapmode();
							} else {
								msgUtil.toast({
									msg: ret.message
								})
							}
						});
					},
					openLesson: function(item) {
						openWin('./study_win', {courseId: item.courseId});
						setTimeout(function() {
							item.pv++
						}, 500);
					}
		    	}
		    });
		</script>
	</body>
</html>
